<html>
<head>
<script type="text/javascript" src="/scripts/dom.js"></script>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript">

function loadGame() {
	var id = document.getElementById("id").value;

	var selectedGame = document.getElementById("selectedGame");
	if (selectedGame.selectedIndex > 0) {
		alert(selectedGame.selectedIndex +" "+ selectedGame.options[selectedGame.selectedIndex]);
		id = selectedGame.options[selectedGame.selectedIndex];
	}

	ajaxRequest("getgame.jsp?id="+id, function(json) {
		listGame(json);
	});
}
//function addPlayer() {
//	var id = document.getElementById("id").value;
//
//	ajaxRequest("addplayer.jsp?id="+id, function(json) {
//		listGame();
//	});
//}

function listGame(game) {
	removeAllChildrenOfId("games");
	removeAllChildrenOfId("players");
	removeAllChildrenOfId("areas");

	appendChildToId("games", buildGameRow(game));

	var players = game.players;
	for (var i = 0; i < players.length; ++i) {
		var player = players[i];
		ajaxRequest("getplayer.jsp?id="+ player, function(json) {
			appendChildToId("players", buildPlayerRow(json));
		});
	}

	var map = game.map;
	var areas = map.areas;
	for (var i = 0; i < areas.length; ++i) {
		var area = areas[i];
		appendChildToId("areas", buildAreaRow(area));
	}
}
function buildGameRow(game) {
	var gameRow = document.createElement("tr");
	gameRow.appendChild(buildTableCell(buildTextNode(game.id)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.name)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.start)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.end)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.state.name)));
	gameRow.appendChild(buildTableCell(buildTextNode(game.map.areacount)));
	gameRow.appendChild(buildTableCell(buildTextList(game.players)));
	return gameRow;
}
function buildPlayerRow(player) {
	var playerRow = document.createElement("tr");
	playerRow.appendChild(buildTableCell(buildTextNode(player.id)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.name)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.mail)));
	playerRow.appendChild(buildTableCell(buildTextNode(player.rank)));
	playerRow.appendChild(buildTableCell(buildButton("Remove", function() {
		ajaxRequest("leavegame.jsp?id="+ player.id, function(json) {
			loadGame();
		});
	})));
	return playerRow;
}
function buildAreaRow(area) {
	var areaRow = document.createElement("tr");
//	areaRow.appendChild(buildTableCell(buildRadio("selected", area.id)));
	areaRow.appendChild(buildTableCell(buildTextNode(area.id)));
	areaRow.appendChild(buildTableCell(buildTextNode(area.name)));
	areaRow.appendChild(buildTableCell(buildTextNode(area.owner)));
	areaRow.appendChild(buildTableCell(buildTextNode(area.force)));
	areaRow.appendChild(buildTableCell(buildTextNode(area.targets)));
	var tableCell = buildTableCell(buildTextNode(""));
	var targets = area.targets;
	for (var i = 0; i < targets.length; ++i) {
		var target = targets[i];
		tableCell.appendChild(buildButton(target, function() {
//			alert(target);
			ajaxRequest("test.jsp", function(json) {});
		}));
	}
	areaRow.appendChild(tableCell);
	return areaRow;
}

window.onload = function() {
	ajaxRequest("listgames.jsp", function(json) {
		var selectedGame = document.getElementById("selectedGame");
		removeAllChildrenOfId("selectedGame");
		for (var i = 0; i < json.length; ++i) {
			var game = json[i];
//			appendChildToId("selectedGame", buildOption(game.name, game.id));
			selectedGame.add(buildOption(game.name, game.id), null);
		}
	});

	loadGame();
}
</script>
</head>
<body>
<h1>Select Game</h1>
<select id="selectedGame">
</select>
<button onclick="loadGame()">Load</button>

<h1>Game Info</h1>
<table border>
<tr>
<th>Id</th>
<th>Name</th>
<th>Start</th>
<th>End</th>
<th>State</th>
<th>Areas</th>
<th>Players</th>
<th>Winner</th>
</tr>
<tbody id="games">
</tbody>
<tfoot>
<tr>
<td><input id="id" /></td>
<td><input id="name" /></td>
<td><input id="state" /></td>
</tr>
</tfoot>
</table>
<button onclick="loadGame()"/>Get Game</button>

<h1>Players</h1>
<table border>
<tr>
<th>Id</th>
<th>Name</th>
<th>Mail</th>
<th>Rank</th>
</tr>
<tbody id="players">
</tbody>
</table>

<h1>Areas</h1>
<table border>
<tr>
<!--th>Selected</th-->
<th>Id</th>
<th>Name</th>
<th>Owner</th>
<th>Force</th>
<th>Targets</th>
</tr>
<tbody id="areas">
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>

<button onclick="loadGame()"/>Get Game</button>
<br>
<a href="listgames.jsp">List Games</a>
<a href="getgame.jsp">Get Game</a>
</body>
</html>
